<template>
  <el-dialog :title="info.title" :visible.sync="info.isShow" @opened="opened">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动期限" :label-width="formLabelWidth">
        <el-date-picker
          value-format="timestamp"
          v-model="value1"
          type="datetimerange"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select v-model="form.first_cateid" @change="changeCate">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历一级分类列表 -->
          <el-option v-for="item in cates" :key="item.id" :label="item.catename" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select v-model="form.second_cateid" @change="changeSpecs">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历二级分类列表 -->
          <el-option
            v-for="item in second_cate"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-select v-model="form.goodsid">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历商品列表 -->
          <el-option
            v-for="item in goodsall"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          active-color="green"
          inactive-color="grey"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
      <el-button v-else type="primary" @click="update">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import E from "wangeditor";
import { oneSeck ,changeSeck} from "../../../request/api";
import { successAlert, errorAlert } from "../../../utils/alert";
export default {
  props: ["info"],
  data() {
    return {
      formLabelWidth: "120px",
      value1: [],
      second_cate: [], //二级分类列表
      goodsall: [] //商品列表
    };
  },
  computed: {
    ...mapGetters({
      form: "seck/form",
      cates: "cate/tableData", //一级商品
      goods: "goods/tableData" //商品
      //   time:"seck/time"
    })
  },
  methods: {
    ...mapActions({
      clearseck: "seck/clearActions",
      requestgoodsList: "cate/CateListActions", //一级分类
      requestgoods: "goods/goodsListActions", //商品
      addseck: "seck/addActions",
      requestform: "seck/formAction",
      requestseck: "seck/seckActions",
      changeseck:"seck/updateActions"
    }),
    changeCate() {
      //获取二级分类
      this.form.second_cateid = "";
      this.form.goodsid = "";
      let index = this.cates.findIndex(
        item => item.id === this.form.first_cateid
      );
      //2.根据下标获取对应的children
      this.second_cate = this.cates[index].children;
      //   console.log(this.second_cate);
    },
    changeSpecs() {
      //获取商品
      this.form.goodsid = "";
      this.goodsall = this.goods;
      // console.log(this.form.second_cateid);
      let arr = this.goodsall.filter(
        item => item.second_cateid === this.form.second_cateid
      );
      this.goodsall = arr;
    },
    opened() {
      //   if (this.form.description) {
      //     this.editor.txt.html(this.form.description);
      //   }
      //   if (this.form.first_cateid) {
      //     this.requestCates("");
      //     let index = this.cates.findIndex(
      //       item => item.id === this.form.first_cateid
      //     );
      //     this.requestCates(this.cates[index].children);
      //   }
      //   if (this.form.specsid) {
      //     this.requestSpecss("");
      //     let index = this.specs.findIndex(item => item.id === this.form.specsid);
      //     this.requestSpecss(this.specs[index].attrs);
      //   }
    },
    cancel() {
      this.info.isShow = false;
      this.info.title = "";
      this.info.isAdd = true;
      this.clearseck();
      this.value1 = [];
    },
    confirm() {
      this.form.begintime = this.value1[0];
      this.form.endtime = this.value1[1];
    //   console.log(this.form);
      this.addseck(this.form);
      this.cancel();
    },
    update() {
        this.form.begintime = this.value1[0];
        this.form.endtime = this.value1[1];
        //  changeSeck(this.form).then(res=>{
        //      console.log(this.form);
        //     if(res.code==200){
        //         successAlert(res.msg)
        //         // context.dispatch('seckActions')
        //         this.requestseck()
        //     }
        // })
        // console.log(this.form);
        this.changeseck(this.form)
        this.cancel();
        

    },
    getone(id) {
      oneSeck({ id }).then(res => {
        if (res.code == 200) {
          res.list.id = id;
          // console.log(res.list);
          this.requestform(res.list);
          this.value1 = [res.list.begintime, res.list.endtime];

          let index = this.cates.findIndex(//二级分类
            item => item.id === this.form.first_cateid
          );
          this.second_cate = this.cates[index].children;

          this.goodsall = this.goods;//商品
          let arr = this.goodsall.filter(
            item => item.second_cateid === this.form.second_cateid
          );
          this.goodsall = arr;
        }
      });
    }
  },
  mounted() {
    this.requestgoodsList();
    this.requestgoods();
  }
};
</script>

<style>
</style>